<template>
  <div class="wrapper">
    <!-- 头部区域 -->
    <div class="header-section">
      <div class="back-btn" @click="goBack">
        <i class="fa fa-angle-left"></i>
      </div>
      <h1 class="page-title">选择AQI</h1>
      <div class="action-icon" @click="toSelectGrid">
        <i class="fa fa-th"></i>
      </div>
    </div>

    <!-- AQI信息卡片 -->
    <section class="info-card">
      <div class="card-title">空气质量指数(AQI)说明</div>
      <div class="card-body">
        <table class="aqi-table">
          <tr v-for="aqi in aqiArr" :key="aqi.aqiId" class="aqi-row">
            <td class="aqi-level">{{aqi.chineseExplain}}</td>
            <td class="aqi-range">{{aqi.aqiExplain}}</td>
            <td class="aqi-impact">{{aqi.healthImpact}}</td>
          </tr>
        </table>
      </div>
    </section>

    <!-- 反馈表单卡片 -->
    <section class="form-card">
      <div class="card-title">空气质量反馈</div>
      <div class="card-body">
        <div class="form-group">
          <h4 class="form-label">请预估当前空气质量指数等级：</h4>
          <div class="aqi-radio-group">
            <label v-for="aqi in aqiArr" :key="aqi.aqiId" class="aqi-radio-item">
              <div :style="{backgroundColor: aqi.color}" class="aqi-color-dot"></div>
              <span class="aqi-text">{{aqi.chineseExplain}}</span>
              <input type="radio" v-model="aqiId" :value="aqi.aqiId" class="aqi-radio" />
            </label>
          </div>
        </div>

        <div class="form-group">
          <h4 class="form-label">请填写反馈信息：</h4>
          <textarea
              placeholder="请填写反馈信息"
              v-model="information"
              class="feedback-textarea"
          ></textarea>
        </div>

        <button class="action-btn" @click="add">
          提交
        </button>
      </div>
    </section>
  </div>
</template>

<script setup>
import { ref, inject } from "vue";
import { useRouter, useRoute } from "vue-router";
import { getSessionStorage, getCurDate, getCurTime } from "../common.js";

const router = useRouter();
const route = useRoute();
const axios = inject("axios");

const aqiArr = ref([]);
const aqiId = ref(0);
const information = ref("");

const supervisor = getSessionStorage('supervisor');

const init = () => {
  axios
      .get("aqi/listAqiAll")
      .then((response) => {
        aqiArr.value = response.data.t;
        aqiId.value = aqiArr.value[0].aqiId;
      })
      .catch((error) => {
        console.log(error);
      });
};
init();

const add = ()=>{
  if(information.value==''){
    alert("反馈信息不能为空！");
    return;
  }

  let param = {
    telId: supervisor.telId,
    provinceId: route.query.provinceId,
    cityId: route.query.cityId,
    address: route.query.address,
    information: information.value,
    estimatedGrade: aqiId.value,
    afDate: getCurDate(),
    afTime: getCurTime(),
    state: 0
  }

  axios
      .post("aqiFeedback/saveAqiFeedback",param)
      .then((response) => {
        if(response.data==1){
          router.push('/feedbackList');
        }else{
          alert('提交反馈信息失败！');
        }
      })
      .catch((error) => {
        console.log(error);
      });
}
</script>

<script>
export default {
  methods: {
    // 新增：返回登录页的方法
    goBack() {
      this.$router.push('/selectGrid') // 跳转到登录页路由
    }
  }
}
</script>

<style scoped>
/* 基础布局 - 适配手机端 */
.wrapper {
  /* 覆盖整个视口，用背景图填充 */
  min-height: 100vh;
  /* 简化背景配置，适配手机；图片路径根据实际调整 */
  background: url('../assets/hjbh.jpg') no-repeat center / cover;
  font-family: 'PingFang SC', sans-serif;
  /* 垂直排列内容，居中 */
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* 从顶部开始排列，避免挤压 */
  align-items: center;
  /* 左右留间隙，适配手机边距 */
  padding: 0 16px;
  /* 限制最大宽度，模拟手机屏幕；可根据需求微调 */
  max-width: 428px;
  /* 让容器居中，适配不同手机宽度 */
  margin: 0 auto;
  /* 避免背景图重复或拉伸变形 */
  background-size: cover;
}

/* 头部区域 - 统一交互元素布局 */
.header-section {
  width: 100%;
  text-align: center;
  /* 调整与下方间距，适配手机 */
  margin: 20px 0;
  position: relative;
}
.back-btn,
.action-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%); /* 垂直居中，适配不同手机 */
  width: 40px;
  height: 40px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.3s;
}
.back-btn {
  left: 0;
}
.action-icon {
  right: 0;
}
.back-btn:hover,
.action-icon:hover {
  background: rgba(0, 0, 0, 0.2);
}
.back-btn i,
.action-icon i {
  color: #333;
  font-size: 20px;
}
.page-title {
  font-size: 24px; /* 调小字号，适配手机 */
  font-weight: 600;
  margin: 0;
  color: #333;
  background: linear-gradient(135deg, #000000 0%, #e6e6e6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8),
  -1px -1px 1px rgba(0, 0, 0, 0.2);
}
.header-divider {
  width: 60px;
  height: 3px;
  background: #000;
  margin: 10px auto 0;
  border-radius: 3px;
}

/* 卡片样式 - 适配手机端 */
.info-card,
.form-card {
  width: 100%; /* 占满可用宽度 */
  max-width: 340px; /* 略窄，适配手机视觉 */
  background: rgba(255, 255, 255, 0.9);
  border-radius: 12px; /* 调小圆角，更贴合手机 */
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  /* 上下间距，避免拥挤 */
  margin-bottom: 16px;
  overflow: hidden;
}
.card-title {
  padding: 12px 16px; /* 缩小内边距 */
  background: #f0f0f0;
  font-size: 15px; /* 调小字号 */
  font-weight: 600;
  color: #333;
}
.card-body {
  padding: 16px; /* 缩小内边距 */
}

/* AQI表格样式 - 手机端更紧凑 */
.aqi-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px; /* 缩小间距 */
  font-size: 14px; /* 调小字号 */
}
.aqi-row {
  border-bottom: 1px solid #e5e5e5;
}
.aqi-row:last-child {
  border-bottom: none;
}
.aqi-level {
  width: 60px; /* 缩小列宽 */
  text-align: center;
  font-weight: 600;
  color: #333;
  padding: 8px 0; /* 缩小内边距 */
}
.aqi-range,
.aqi-impact {
  padding: 8px 0; /* 缩小内边距 */
  color: #666;
  line-height: 1.4; /* 紧凑行高 */
}

/* 表单样式 - 手机端适配 */
.form-group {
  margin-bottom: 16px; /* 缩小间距 */
}
.form-label {
  font-size: 15px; /* 调小字号 */
  font-weight: 600;
  color: #333;
  margin-bottom: 12px; /* 缩小间距 */
  display: block;
}
.aqi-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px; /* 缩小间距 */
}
.aqi-radio-item {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 6px 10px; /* 缩小内边距 */
  border-radius: 6px;
  transition: background 0.2s;
  font-size: 14px; /* 调小字号 */
}
.aqi-radio-item:hover {
  background: #f5f5f5;
}
.aqi-color-dot {
  width: 18px; /* 缩小点大小 */
  height: 18px;
  border-radius: 4px;
  margin-right: 6px; /* 缩小间距 */
}
.aqi-text {
  margin-right: 8px; /* 缩小间距 */
}
.aqi-radio {
  accent-color: #000;
}

.feedback-textarea {
  width: 100%;
  height: 100px; /* 缩短高度，适配手机 */
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  padding: 10px; /* 缩小内边距 */
  box-sizing: border-box;
  font-size: 14px; /* 调小字号 */
  color: #333;
  resize: none;
}

/* 按钮样式 - 手机端更友好 */
.action-btn {
  width: 100%;
  padding: 10px; /* 缩小内边距 */
  background: #000;
  color: #fff;
  border: none;
  border-radius: 22px; /* 调小圆角 */
  font-size: 15px; /* 调小字号 */
  cursor: pointer;
  transition: background 0.3s;
}
.action-btn:hover {
  background: #333;
}
</style>